<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>参数的获取</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<!-- 1: 移入vue-router(核心插件)对象-->
<script type="text/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
  var Login = {
    template:`
        <div>
          我是登录页面
        </div>
    `,
    created:function(){
      console.log(this.$route.query)
    }
  }
  var Register = {
    template:`
      <div>我是注册页面</div>
    `,
    created:function(){
      console.log(this.$route.params)
    }
  }
  // 2:安装插件
  Vue.use(VueRouter);
  // 3:创建一个路由对象
  var router = new VueRouter({
    // 4:配置路由对象
    routes:[
      { name:'login',path:'/login',component:Login },
      { name:'register',path:'/register/:name',component:Register }
    ]
  });
  // 6:指定路由改变局部的位置
  var App = {
    template:`
        <div>
           <router-link :to="{ name:'login',query:{id:1} }">去登录</router-link>
           <router-link :to="{ name:'register',params:{name:'abc'} }">去注册</router-link>
           <router-view></router-view>
        </div>
      `
  };
  // 5:将配置好的路由对象关联到vue实例中
  new Vue({
    el:'#app',
    router:router, //不加会导致运行时报matched of undefined
    components:{
      app:App
    },
    template:'<app/>'
  });

</script>
</body>
</html>

